import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { ElevatedCard, Column, HorizontalSpacer, Row, Tag, Typography, Button } from '@components';
import { mainColors, colorPalette, colorGuide, fontNameSpaces, getButtonConfig } from '@primitives';

<Meta title="Components/ElevatedCard" component={ElevatedCard} />

# ElevatedCard

Card component with plunks at right & bottom edges. Just wrap your card-content inside ElevatedCard component to make it elevated.

export const CardTemplate = (args) => <ElevatedCard {...args} />;

## Usage

<Canvas>
    <Story
        name="Basic Card"
        args={{
            backgroundColor: '#AE275F',
            edgeColors: {
                bottom: '#5C1532',
                right: '#851E49',
            },
            style: {
                width: '230px',
            },
            children: (
                <div style={{ padding: '20px' }}>
                    <Column>
                        <Row className="v-justify">
                            <div>
                                <Typography {...fontNameSpaces.tc12b} color={mainColors.white}>
                                    ABCD Bank
                                </Typography>
                                <HorizontalSpacer n={2} />
                                <Typography
                                    {...fontNameSpaces.tb11m}
                                    color={colorPalette.popWhite[100]}
                                    overflow="ellipsis"
                                >
                                    XXX 1111
                                </Typography>
                            </div>
                            <Row
                                style={{
                                    width: '30px',
                                    height: '30px',
                                    borderRadius: '50%',
                                    border: `1px solid ${mainColors.white}`,
                                }}
                                className="h-center v-center"
                            >
                                <div
                                    style={{
                                        width: '20px',
                                        height: '20px',
                                        borderRadius: '50%',
                                        backgroundColor: colorPalette.popWhite[300],
                                    }}
                                />
                            </Row>
                        </Row>
                        <HorizontalSpacer n={8} />
                        <div style={{ maxWidth: '50%' }}>
                            <Tag
                                colorConfig={{
                                    background: mainColors.yellow,
                                    color: colorPalette.popWhite[400],
                                }}
                            >
                                Due Today
                            </Tag>
                        </div>
                        <HorizontalSpacer n={2} />
                        <Typography {...fontNameSpaces.th16b} color={mainColors.white}>
                            ₹1000.00
                        </Typography>
                        <HorizontalSpacer n={4} />
                        <Button {...getButtonConfig('blp50p1')} fullWidth={true}>
                            Pay Now
                        </Button>
                    </Column>
                </div>
            ),
        }}
    >
        {CardTemplate.bind({})}
    </Story>
</Canvas>

```jsx
import React from 'react';
import {
    ElevatedCard,
    Column,
    Row,
    Typography,
    HorizontalSpacer,
    Tag,
    Button,
} from '@cred/neopop-web/lib/components';
import {
    mainColors,
    colorPalette,
    colorGuide,
    fontNameSpaces,
    getButtonConfig,
} from '@cred/neopop-web/lib/primitives';
import styled from 'styled-components';

const ContentWrapper = styled.div`
    padding: 20px;
`;

const Card = () => {
    return (
        <ElevatedCard
            backgroundColor="#AE275F"
            edgeColors={{
                bottom: '#5C1532',
                right: '#851E49',
            }}
            style={{
                width: '230px',
            }}
        >
            <ContentWrapper>
                <Column>
                    <Row className="v-justify">
                        <div>
                            <Typography {...fontNameSpaces.tc12b} color={mainColors.white}>
                                ABCD Bank
                            </Typography>
                            <HorizontalSpacer n={2} />
                            <Typography
                                {...fontNameSpaces.tb11m}
                                color={colorPalette.popWhite[100]}
                                overflow="ellipsis"
                            >
                                XXX 1111
                            </Typography>
                        </div>
                        <Row
                            style={{
                                width: '30px',
                                height: '30px',
                                borderRadius: '50%',
                                border: `1px solid ${mainColors.white}`,
                            }}
                            className="h-center v-center"
                        >
                            <div
                                style={{
                                    width: '20px',
                                    height: '20px',
                                    borderRadius: '50%',
                                    backgroundColor: colorPalette.popWhite[300],
                                }}
                            />
                        </Row>
                    </Row>
                    <HorizontalSpacer n={8} />
                    <div style={{ maxWidth: '50%' }}>
                        <Tag
                            colorConfig={{
                                background: mainColors.yellow,
                                color: colorPalette.popWhite[400],
                            }}
                        >
                            Due Today
                        </Tag>
                    </div>
                    <HorizontalSpacer n={2} />
                    <Typography {...fontNameSpaces.th16b} color={mainColors.white}>
                        ₹1000.00
                    </Typography>
                    <HorizontalSpacer n={4} />
                    <Button {...getButtonConfig('blp50p1')} fullWidth={true}>
                        Pay Now
                    </Button>
                </Column>
            </ContentWrapper>
        </ElevatedCard>
    );
};

export default Card;
```

## Props

<div style={{overflowX: 'auto'}}>

| prop              | description                                     | type            |
| ----------------- | ----------------------------------------------- | --------------- |
| `edgeColors`      | color configs of right & bottom plunk           | `object`        |
| `backgroundColor` | card background color                           | `string`       |
| `style`           | inline css styles                               | `CSSProperties` |
| `fullWidth`       | if true, card takes full-width of the container | `boolean`       |

</div>
